<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>搜索 - 古诗小程序</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="common.css">
    <style>
        html,
        body {
            height: 100%;
        }

        .search-box {
            position: relative;
            margin-bottom: 20px;
        }

        .search-input {
            width: 100%;
            padding: 12px 20px 12px 48px;
            border-radius: 12px;
            border: none;
            font-size: 16px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            background-color: white;
        }

        .search-icon {
            position: absolute;
            left: 16px;
            top: 50%;
            transform: translateY(-50%);
            color: #888;
        }

        .result-item {
            transition: all 0.2s ease;
            border-bottom: 1px solid #f0f0f0;
        }

        .result-item:last-child {
            border-bottom: none;
        }

        .result-item:hover,
        .result-item:active {
            background-color: #f9f9f9;
        }

        .history-tag {
            background-color: #f0f0f0;
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 14px;
            margin-right: 8px;
            margin-bottom: 8px;
            display: inline-block;
            color: #444;
        }
    </style>
</head>

<body class="bg-gray-100">
    <div class="phone-container">
        <!-- 顶部状态栏 -->
        <div class="status-bar">
            <span>19:02</span>
            <div class="flex items-center">
                <i class="fas fa-signal mr-2"></i>
                <i class="fas fa-wifi mr-2"></i>
                <i class="fas fa-battery-full"></i>
            </div>
        </div>

        <!-- 内容区域 -->
        <div class="content pb-24">
            <h1 class="text-2xl font-bold mb-6 text-gray-800">搜索古诗</h1>

            <!-- 搜索框 -->
            <div class="search-box">
                <i class="fas fa-search search-icon"></i>
                <input type="text" class="search-input" placeholder="输入关键词、作者或诗句" id="searchInput">
            </div>

            <!-- 搜索历史 -->
            <div class="card mb-5" id="searchHistory">
                <div class="flex justify-between items-center mb-3">
                    <h3 class="font-semibold">搜索历史</h3>
                    <button class="text-sm text-gray-500">
                        <i class="fas fa-trash-alt mr-1"></i> 清空
                    </button>
                </div>
                <div class="flex flex-wrap">
                    <span class="history-tag">李白</span>
                    <span class="history-tag">思乡</span>
                    <span class="history-tag">春天</span>
                    <span class="history-tag">山水</span>
                    <span class="history-tag">边塞</span>
                </div>
            </div>

            <!-- 搜索结果区域 -->
            <div class="card" id="searchResults" style="display: none;">
                <h3 class="font-semibold mb-4">搜索结果</h3>
                <div class="result-list">
                    <!-- 搜索结果项 -->
                    <div class="result-item p-3 cursor-pointer" onclick="showPopup('poemDetailPopup')">
                        <h4 class="font-semibold mb-1">春晓</h4>
                        <p class="text-sm text-gray-500 mb-2">唐代 · 孟浩然</p>
                        <p class="text-sm text-gray-700 line-clamp-2">春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。</p>
                    </div>

                    <div class="result-item p-3 cursor-pointer">
                        <h4 class="font-semibold mb-1">望庐山瀑布</h4>
                        <p class="text-sm text-gray-500 mb-2">唐代 · 李白</p>
                        <p class="text-sm text-gray-700 line-clamp-2">日照香炉生紫烟，遥看瀑布挂前川。飞流直下三千尺，疑是银河落九天。</p>
                    </div>

                    <div class="result-item p-3 cursor-pointer">
                        <h4 class="font-semibold mb-1">山行</h4>
                        <p class="text-sm text-gray-500 mb-2">唐代 · 杜牧</p>
                        <p class="text-sm text-gray-700 line-clamp-2">远上寒山石径斜，白云生处有人家。停车坐爱枫林晚，霜叶红于二月花。</p>
                    </div>

                    <div class="result-item p-3 cursor-pointer">
                        <h4 class="font-semibold mb-1">赋得古原草送别</h4>
                        <p class="text-sm text-gray-500 mb-2">唐代 · 白居易</p>
                        <p class="text-sm text-gray-700 line-clamp-2">离离原上草，一岁一枯荣。野火烧不尽，春风吹又生。</p>
                    </div>

                    <div class="result-item p-3 cursor-pointer">
                        <h4 class="font-semibold mb-1">枫桥夜泊</h4>
                        <p class="text-sm text-gray-500 mb-2">唐代 · 张继</p>
                        <p class="text-sm text-gray-700 line-clamp-2">月落乌啼霜满天，江枫渔火对愁眠。姑苏城外寒山寺，夜半钟声到客船。</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部导航栏 -->
        <div class="tab-bar">
            <div class="tab-item" data-page="poem">
                <i class="fas fa-book"></i>
                <span>古诗</span>
            </div>
            <div class="tab-item active" data-page="search">
                <i class="fas fa-search"></i>
                <span>搜索</span>
            </div>
            <div class="tab-item" data-page="profile">
                <i class="fas fa-user"></i>
                <span>我的</span>
            </div>
        </div>

        <!-- 古诗详情弹出层 -->
        <div id="poemDetailPopup" class="popup">
            <div class="popup-header">
                <h3 class="font-semibold">古诗详情</h3>
                <button class="popup-close">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="popup-content">
                <h2 class="text-xl font-bold mb-1">春晓</h2>
                <p class="text-gray-500 mb-6">唐代 · 孟浩然</p>

                <div class="poem-content text-center mb-8 text-lg">
                    春眠不觉晓，<br>
                    处处闻啼鸟。<br>
                    夜来风雨声，<br>
                    花落知多少。
                </div>

                <div class="bg-gray-50 rounded-lg p-4 mb-4">
                    <h4 class="font-semibold mb-2">注释</h4>
                    <p class="text-sm leading-6 text-gray-700">
                        春晓：春天的早晨。<br>
                        不觉晓：不知不觉天已经亮了。<br>
                        啼鸟：鸣叫的鸟。<br>
                        夜来：昨夜。<br>
                        花落知多少：不知道落了多少花。
                    </p>
                </div>

                <div class="flex justify-between">
                    <button class="btn bg-gray-200 text-gray-700 flex items-center">
                        <i class="far fa-heart mr-2"></i> 收藏
                    </button>
                    <button class="btn bg-gray-200 text-gray-700 flex items-center">
                        <i class="fas fa-share-alt mr-2"></i> 分享
                    </button>
                </div>
            </div>
        </div>

        <!-- 遮罩层 -->
        <div id="overlay" class="overlay"></div>
    </div>

    <script src="common.js"></script>
    <script>
        // 搜索功能模拟
        document.addEventListener('DOMContentLoaded', function () {
            const searchInput = document.getElementById('searchInput');
            const searchHistory = document.getElementById('searchHistory');
            const searchResults = document.getElementById('searchResults');

            searchInput.addEventListener('focus', function () {
                searchHistory.style.display = 'block';
                searchResults.style.display = 'none';
            });

            searchInput.addEventListener('keyup', function (e) {
                if (e.key === 'Enter' && this.value.trim() !== '') {
                    searchHistory.style.display = 'none';
                    searchResults.style.display = 'block';
                }
            });

            // 历史标签点击
            const historyTags = document.querySelectorAll('.history-tag');
            historyTags.forEach(tag => {
                tag.addEventListener('click', function () {
                    searchInput.value = this.textContent;
                    searchHistory.style.display = 'none';
                    searchResults.style.display = 'block';
                });
            });
        });
    </script>
</body>

</html>